<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { Plus, Search } from "@element-plus/icons-vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useColumns, useColumnsAccess } from "./utils/columns";
import videoDetail from "./components/videoDetail.vue";
const {
    listQuery,
    columns,
    pagination,
    getList,
    handleSizeChange,
    handleCurrentChange,
    handleFilter,
    listLoading,
    listData,
    handleDelete,
    dialogDeleteVisible,
    confirmDelete
} = useColumns();
const {
    listQueryAccess,
    columnsAccess,
    paginationAccess,
    getListAccess,
    handleSizeChangeAccess,
    handleCurrentChangeAccess,
    handleFilterAccess,
    listLoadingAccess,
    listDataAccess,
    handleDeleteAccess,
    dialogDeleteVisibleAccess,
    confirmDeleteAccess
} = useColumnsAccess();
const accessType = ref(1)
const videoDetailRef = ref(null)

defineOptions({
    name: "Monitoring"
});
const treeData = reactive([
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 2',
        children: [
            {
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 3',
        children: [
            {
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
])
const defaultProps = {
    children: 'children',
    label: 'label',
}
const nodeClick = node => {
    console.log(node)
}
// 切换类型
const handleChange = type => {
    console.log(type)
    accessType.value = type
}
// 查看详情
const handleOpen = item => {
    videoDetailRef?.value.handleOpen(item)
}
</script>

<template>
    <div>
        <basic-layout-header :treeData="treeData" :defaultProps="defaultProps" @nodeClick="nodeClick"
            placeholderTree="请输入设备位置搜索">
            <!-- 顶部 -->
            <template #header>
                <div class="device-header">
                    <div>
                        <div>
                            <img style="width: 66px;" src="@/assets/image/mj-sxjzs.png" />
                            <span>设备总数</span>
                        </div>
                        <span>213</span>
                        <img src="@/assets/image/sxt-bg.png" class="sxt-bg" />
                    </div>
                    <div>
                        <div>
                            <img src="@/assets/image/mj-zxsb.png" />
                            <span>在线设备</span>
                        </div>
                        <span>21</span>
                    </div>
                    <div>
                        <div>
                            <img src="@/assets/image/mj-lxsb.png" />
                            <span>离线设备</span>
                        </div>
                        <span>13</span>
                    </div>
                    <div>
                        <div>
                            <img src="@/assets/image/mj-gzsb.png" />
                            <span>故障设备</span>
                        </div>
                        <span>13</span>
                    </div>
                </div>
            </template>
            <!-- 如果自定义树内容 -->
            <!-- <template #tree></template> -->
            <!-- 树结构操作按钮 -->
            <template #tab>
                <el-tabs v-model="accessType" class="demo-tabs">
                    <el-tab-pane label="设备列表" :name="1"></el-tab-pane>
                    <el-tab-pane label="出入记录" :name="2"></el-tab-pane>
                </el-tabs>
            </template>
            <template #search>
                <div class="search-left">
                    <el-form :model="listQuery" inline v-if="accessType === 2">
                        <el-form-item>
                            <el-input style="width: 400px;" :suffix-icon="Search" v-model="listQuery.name"
                                placeholder="请输入设备编号、名称、IP地址或位置等关键字进行搜索" />
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="listQuery.date" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="listQuery.status" placeholder="请选择状态" style="width: 240px">
                                <el-option key="1" label="入场" :value="1" />
                                <el-option key="1" label="出场" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form :model="listQueryAccess" inline v-else>
                        <el-form-item>
                            <el-input style="width: 400px;" :suffix-icon="Search" v-model="listQueryAccess.name"
                                placeholder="请输入设备编号、名称、IP地址或位置等关键字进行搜索" />
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <!-- 表格 -->
            <template #tableContent>
                <PureTableBar v-if="accessType === 1" :columns="columns" @refresh="getList" title="列表设置">
                    <template v-slot="{ size, dynamicColumns }">
                        <pure-table default-expand-all ref="tableRef" row-key="id" adaptive table-layout="auto"
                            :loading="listLoading" :size="size" :data="listData" :columns="dynamicColumns"
                            :pagination="{ ...pagination, size }" :header-cell-style="{
                                background: 'var(--el-fill-color-light)',
                                color: 'var(--el-text-color-primary)'
                            }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
                            <template #status="{ row }">
                                <el-tag style="background: transparent;" key="item" type="success" effect="plain">
                                    在线
                                </el-tag>
                            </template>
                            <template #operation="{ row }">
                                <el-button class="reset-margin" link type="primary" @click="handleOpen(row)">
                                    详情
                                </el-button>
                                <el-button class="reset-margin" link type="primary" @click="handleOpen(row)">
                                    监控画面
                                </el-button>
                            </template>
                        </pure-table>
                    </template>
                </PureTableBar>
                <PureTableBar v-if="accessType === 2" :columns="columnsAccess" @refresh="getList" title="列表设置">
                    <template v-slot="{ size, dynamicColumns }">
                        <pure-table default-expand-all ref="tableRef" row-key="id" adaptive table-layout="auto"
                            :loading="listLoading" :size="size" :data="listData" :columns="dynamicColumns"
                            :pagination="{ ...pagination, size }" :header-cell-style="{
                                background: 'var(--el-fill-color-light)',
                                color: 'var(--el-text-color-primary)'
                            }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
                            <template #status="{ row }">
                                <el-tag style="background: transparent;" key="item" type="success" effect="plain">
                                    在线
                                </el-tag>
                            </template>
                        </pure-table>
                    </template>
                </PureTableBar>
            </template>
        </basic-layout-header>
        <video-detail ref="videoDetailRef"></video-detail>

    </div>

</template>
<style lang="scss" scoped>
.device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 20px;

    &>div {
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        background: #eee;
        border-radius: 8px;
        flex: 1;
        border: 1px solid #E3E7F0;
        font-size: 16px;
        color: #1F2329;
        min-width: 300px;
        position: relative;
        overflow: hidden;

        .sxt-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 250px;
        }

        &:nth-child(1) {
            color: #fff;
            background: var(--el-color-primary) // linear-gradient(to bottom, #D0E1F8 0%, #DDE7F7 50%, #E9EEF6 100%);
        }

        &:nth-child(2) {
            background: linear-gradient(to top, #F8F9FB 0%, #CDF5E0 100%);
        }

        &:nth-child(3) {
            background: linear-gradient(to top, #F8F9FB 0%, #F9F0DE 100%);
        }

        &:nth-child(4) {
            background: linear-gradient(to top, #F8F9FB 0%, #FFEFEF 100%);
        }

        &>div {
            display: flex;
            align-items: center;

        }

        &>span {
            font-weight: bold;
            font-size: 36px;
            // color: #1F2329;
        }

        img {
            width: 80px;
            margin-right: 15px;
        }
    }
}
</style>